import {useState} from 'react';
import sty from '@/style.module/editor/index.module.scss';
import {
    IconRecordStop,
    IconFile,
    IconEdit,
    IconQuestionCircle,
    IconGithub,
    IconMoon,
    IconSun,
} from '@arco-design/web-react/icon';
import {Dropdown, Menu} from '@arco-design/web-react';
import classnames from 'classnames';
import Thumbnail from './components/Thumbnail';
import PaintingTool from './components/PaintingTool/index';
import Canvas from './components/Canvas';

const MenuItem = Menu.Item;

export default function Editor() {
    const [operationMenu] = useState([
        {
            label: '文件',
            icon: <IconFile />,
            children: [
                {
                    label: '导入',
                },
                {
                    label: '导出',
                },
            ],
        },
        {
            label: '编辑',
            icon: <IconEdit />,
            children: [
                {
                    label: '删除',
                },
                {
                    label: '重做',
                },
                {
                    label: '重置幻灯片',
                },
            ],
        },
        {
            label: '演示',
            icon: <IconRecordStop />,
            children: [
                {
                    label: '从首页开始',
                },
                {
                    label: '从当前页开始',
                },
            ],
        },
        {
            label: '帮助',
            icon: <IconQuestionCircle />,
            children: [
                {
                    label: '快捷键',
                },
            ],
        },
    ]);

    const [mode, setMode] = useState('light');

    const changeModel = (mode: string) => {
        if (mode === 'light') {
            setMode('dark');
            document.body.setAttribute('arco-theme', 'dark');
        } else {
            setMode('light');
            document.body.setAttribute('arco-theme', 'light');
        }
    };

    return (
        <div className={sty.container}>
            <header className={sty.header}>
                <nav className={classnames(sty.nav, sty.navLeft)}>
                    {operationMenu.map((item) => {
                        return (
                            <Dropdown
                                key={item.label}
                                position='bl'
                                droplist={
                                    <Menu>
                                        {item.children.map((menuItem) => {
                                            return (
                                                <MenuItem key={menuItem.label}>
                                                    {menuItem.label}
                                                </MenuItem>
                                            );
                                        })}
                                    </Menu>
                                }
                            >
                                <div className={sty.navItem}>
                                    {item.icon}
                                    <span>{item.label}</span>
                                </div>
                            </Dropdown>
                        );
                    })}
                </nav>
                <nav className={classnames(sty.nav, sty.navRight)}>
                    <div
                        className={sty.menuItem}
                        onClick={() => {
                            changeModel(mode);
                        }}
                    >
                        {mode === 'light' ? <IconMoon /> : <IconSun />}
                    </div>
                    <div className={sty.menuItem}>
                        <IconGithub />
                    </div>
                </nav>
            </header>

            <section className={sty.content}>
                <aside className={sty.thumbnail}>
                    <Thumbnail />
                </aside>
                <div className={sty.canvasWarp}>
                    <Canvas />
                </div>
                <aside className={sty.settingBar}>
                    <PaintingTool />
                </aside>
            </section>
        </div>
    );
}
